<template>
    <div class="container">
        <!-- 头部 -->
        <ul class="appointmentsNumber">
            <li>
                <span>今日预约次数</span>
                <i>182次</i>
            </li>
            <li>
                <span>今日预约次数</span>
                <i>182次</i>
            </li>
            <li>
                <span>今日预约次数</span>
                <i>182次</i>
            </li>
            <li>
                <span>今日预约次数</span>
                <i>182次</i>
            </li>
        </ul>
        <!-- echarts -->
        <ul class="spaceRatio">
            <li>
                <i>空间预约占比</i>
                <span id="spaceRatioLi">
                </span>
            </li>
            <li>
                <i>取消违约原因占比</i>
                <span id="cancelSpaceRatioLi"></span>
            </li>
            <li>
                <i>违约占比</i>
                <span id="violateSpaceRatioLi"></span>
            </li>
        </ul>
        <div class="tabelBox">
            <span>取消预约数据</span>
            <el-form ref="notesRef" :inline="true" :model="notesForm" class="demo-form-inline">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="空间分类" prop="classification">
                            <el-select v-model="notesForm.classification" placeholder="请选择类别">
                                <el-option label="实验室" value="shanghai"></el-option>
                                <el-option label="图书馆" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="空间名称" prop="designation">
                            <el-input v-model="notesForm.designation" placeholder="请输入空间名称"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="info" size="medium" @click="notesSubmit">查询</el-button>
                            <el-button type="info" size="medium" @click="resetting">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="tableData">
                <el-table-column type="index" label="序号" :index="indexMethod">
                </el-table-column>
                <el-table-column prop="classification" label="所属分类">
                </el-table-column>
                <el-table-column prop="spanName" label="空间名称">
                </el-table-column>
                <el-table-column prop="appointmentDate" label="预约日期">
                </el-table-column>
                <el-table-column prop="appointmentTime" label="预约时间">
                </el-table-column>
                <el-table-column prop="appointmentNum" label="预约人数">
                </el-table-column>
                <el-table-column prop="appointmentPerson" label="预约人">
                </el-table-column>
                <el-table-column prop="checkTime" label="签到时间">
                </el-table-column>
                <el-table-column prop="applyTime" label="申请时间">
                </el-table-column>
                <el-table-column prop="cancelReason" label="取消原因">
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    created() {
        // 空间预约占比
        this.$nextTick(() => {
            this.spaceRatioLi()
        })
        // 取消违约原因占比
        this.$nextTick(() => {
            this.cancelSpaceRatioLi()
        })
        // 违约占比
        this.$nextTick(() => {
            this.violateSpaceRatioLi()
        })
    },
    data() {
        return {
            // 分页
            pagination: {
                // 显示第几页
                showApage: 1,
                // 总条数
                total: 50,
                // 每页显示多少条
                pageNum: 10,
            },
            // 查询表单
            notesForm: {
                classification: '',
                designation: ''
            },
            tableData: [{
                // 所属分类
                classification: '图书馆',
                // 空间名称
                spanName: '阅览室01',
                // 预约日期
                appointmentDate: '2023-04-21',
                // 预约时间
                appointmentTime: '10:00-14:00',
                // 预约人数
                appointmentNum: '5人',
                // 预约人
                appointmentPerson: '王强',
                // 签到时间
                checkTime: '2024-01-15 15:28:15',
                // 申请时间
                applyTime: '2024-01-15 15:28:15',
                // 取消原因
                cancelReason: '时间冲突',
            }, {
                classification: '图书馆',
                spanName: '阅览室01',
                appointmentDate: '2023-04-21',
                appointmentTime: '10:00-14:00',
                appointmentNum: '5人',
                appointmentPerson: '王强',
                checkTime: '2024-01-15 15:28:15',
                applyTime: '2024-01-15 15:28:15',
                cancelReason: '时间冲突',
            }, {
                classification: '图书馆',
                spanName: '阅览室01',
                appointmentDate: '2023-04-21',
                appointmentTime: '10:00-14:00',
                appointmentNum: '5人',
                appointmentPerson: '王强',
                checkTime: '2024-01-15 15:28:15',
                applyTime: '2024-01-15 15:28:15',
                cancelReason: '时间冲突',
            }, {
                classification: '图书馆',
                spanName: '阅览室01',
                appointmentDate: '2023-04-21',
                appointmentTime: '10:00-14:00',
                appointmentNum: '5人',
                appointmentPerson: '王强',
                checkTime: '2024-01-15 15:28:15',
                applyTime: '2024-01-15 15:28:15',
                cancelReason: '时间冲突',
            }]
        }
    },
    methods: {
        // 空间预约占比
        spaceRatioLi() {
            var chartDom = document.getElementById('spaceRatioLi');
            var myChart = this.$echarts.init(chartDom);
            // 设置你的图表配置
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    // 设置图例项的布局方向进行反转，即从底部对齐改为顶部对齐
                    top: '0',
                    right: '0',
                    textStyle: {
                        fontSize: 12 // 设置图例字体大小
                    },
                    itemWidth: 20, // 设置图例项的宽度
                    itemHeight: 10, // 设置图例项的高度
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 7,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: true,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '电子阅览室01' },
                            { value: 735, name: '电子阅览室02' },
                            { value: 580, name: '电子阅览室03' },
                        ],
                        // 设置 name 字体大小
                        label: {
                            show: false,
                            position: 'insideRight',
                            textStyle: {
                                fontSize: 6 // 这里设置你需要的大小
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        // 取消违约占比
        cancelSpaceRatioLi() {
            var chartDom = document.getElementById('cancelSpaceRatioLi');
            var myChart = this.$echarts.init(chartDom);
            // 设置你的图表配置
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    // 设置图例项的布局方向进行反转，即从底部对齐改为顶部对齐
                    top: '0',
                    right: '0',
                    textStyle: {
                        fontSize: 12 // 设置图例字体大小
                    },
                    itemWidth: 20, // 设置图例项的宽度
                    itemHeight: 10, // 设置图例项的高度
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 7,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: true,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '时间冲突' },
                            { value: 735, name: '场地不合适' },
                            { value: 580, name: '紧急情况' },
                            { value: 580, name: '其他原因' },
                        ],
                        // 设置 name 字体大小
                        label: {
                            show: false,
                            position: 'insideRight',
                            textStyle: {
                                fontSize: 6 // 这里设置你需要的大小
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        // 违约占比
        violateSpaceRatioLi() {
            var chartDom = document.getElementById('violateSpaceRatioLi');
            var myChart = this.$echarts.init(chartDom);
            // 设置你的图表配置
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    // 设置图例项的布局方向进行反转，即从底部对齐改为顶部对齐
                    top: '0',
                    right: '0',
                    textStyle: {
                        fontSize: 12 // 设置图例字体大小
                    },
                    itemWidth: 20, // 设置图例项的宽度
                    itemHeight: 10, // 设置图例项的高度
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 7,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: true,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 148, name: '超时未签到' },
                            { value: 735, name: '空间使用率低' },
                            { value: 580, name: '时间使用率低' },
                            { value: 200, name: '预约成功却未启用' },
                        ],
                        // 设置 name 字体大小
                        label: {
                            show: false,
                            position: 'insideRight',
                            textStyle: {
                                fontSize: 6 // 这里设置你需要的大小
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        // 查询
        notesSubmit() {
            console.log('submit!');
        },
        // 重置
        resetting() {
            this.$refs.notesRef.resetFields()
        },
        // 不足两位数 补0操作
        indexMethod(index) {
            return (index + 1).toString().padStart(2, '0');
        },
    }
}
</script>

<style lang="less" scoped>
.container {
    height: 530px;
}

i {
    font-style: normal;
}

li {
    list-style: none;
}

.appointmentsNumber {
    display: flex;

    >li {
        padding: 20px 0 20px 30px;
        width: 200px;
        height: 120px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
}

.spaceRatio {
    display: flex;

    >li {
        padding: 20px;
        width: 270px;
        height: 270px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        margin-right: 28px;

        >i {
            font-size: 15px;
        }

        >span {
            display: inline-block;
            width: 100%;
            height: 100%;
            // margin-right: 10px;
        }
    }
}

.tabelBox {
    margin-left: 35px;

    >span {
        display: inline-block;
        font-size: 18px;
        margin-bottom: 12px;
    }
}
</style>